<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分析室列表</title>
    <style>
      .container{
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-around;
      }
      .title{
          font-size: 28px;
          font-weight: bold;
          color: #1a252f;
      }
      .conent{
          width: 100%;
          height: auto;
          padding: 30px 80px;
          border: 1px solid #000;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-around;

          flex-wrap: wrap;
      }
      .room{
          width: 300px;
          height: 160px;
          margin: 30px 80px;
          border: 1px solid #000;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-between;
      }
      .position{
          font-size: 24px;
          font-weight: bold;
          color: #1a252f;
      }
      .con{
          height: calc(70%);
      }

      .name{
          font-size: 28px;
          font-weight: bold;
          color: #1a252f;
            text-align: center;

      }
    </style>
</head>

<body>
<div class="container">
    <div class="title">分析室监控</div>
    <div class="conent">
        <div class="room">
            <div class="position">1号楼</div>
            <div class="con">
                <div class="name">分析PC001</div>
            </div>
        </div>
        <div class="room">
            <div class="position">2号楼</div>
            <div class="con">
                <div class="name">分析PC002</div>
            </div>
        </div>
        <div class="room">
            <div class="position">2号楼</div>
            <div class="con">
                <div class="name">分析PC002</div>
            </div>
        </div>
        <div class="room">
            <div class="position">2号楼</div>
            <div class="con">
                <div class="name">分析PC002</div>
            </div>
        </div>
        <div class="room">
            <div class="position">2号楼</div>
            <div class="con">
                <div class="name">分析PC002</div>
            </div>
        </div>
        <div class="room">
            <div class="position">2号楼</div>
            <div class="con">
                <div class="name">分析PC002</div>
            </div>
        </div>
    </div>
</div>

</body>
</html>